<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/index.css" />
    <title>留言</title>
    <style>
      .bg{
       background-image: url(./img/bg3.jpeg) ;
       background-repeat: no-repeat;
       background-size: 100%;
      }
      .bg1{
        background-color: white;
      }
      p{
        color: skyblue;
      }
    </style>
  </head>

  <body class="bg1">
    <div class="main bg">
      <h3 class="box">留言板</h3>
      <p style="margin-left: 50px; font-size: 16px;">您的宝贵建议，是我们不断改进自我的重要参考 <a href="index.html" style="margin-left: 650px; color: skyblue;">返回首页</a>
      </p>
      
      <div class="comment-send box">
        <div class="user-face">
          <img id="avatar" src="./img/tou1.jpg" alt="" />
        </div>
        <div class="textarea-comtainer">
          <input type="text" placeholder="请输入昵称" id="name" />
          <textarea name="" id="txt" placeholder="发一条友善的评论"></textarea>
          <button class="comment-submit" id="btn">发表<br />评论</button>
        </div>
      </div>
      <div class="reply-wrap box">
        <div class="user-face"></div>
        <!-- 装载已发表的评论 -->
        <div class="right">
          <div class="reply-item">
            <div class="user">
              <div class="user-face">
                <img src="./img/user-2.png" alt="" class="w-100"/>
              </div>
              <div class="user-name">死水还阴啊</div>
              <p>常年被骂，但不会反驳大众舆论，只会虚心听取意见后默默作出改进。</p>
            </div>
            <div class="info">
              <span>2023-10-16 11:58</span>
              <span>28460</span>
              <span></span>
              <span><a class="remove" href="#">删除</a></span>
            </div>
          </div>
          <div class="reply-item">
            <div class="user">
              <div class="user-face">
                <img src="./img/user-3.png" alt="" class="w-100"/>
              </div>
              <div class="user-name">季伯常</div>
              <p>聊天软件还是游戏公司只不过是业界对腾讯的高度概括。
              </p>
            </div>
            <div class="info">
              <span>2023-10-16 11:58</span>
              <span>870</span>
              <span></span>
              <span><a class="remove" href="#">删除</a></span>
            </div>
          </div>
          <div class="reply-item">
            <div class="user">
              <div class="user-face">
                <!-- <img src="images/user-3.jpg" alt="" /> -->
                <img src="./img/user-4.png" alt=""  class="w-100"/>
              </div>
              <div class="user-name">茂职耐摔王</div>
              <p> 办公环境舒服，人文关怀好，培训体系完善</p>
            </div>
            <div class="info">
              <span>2023-10-16 12:09</span>
              <span>460</span>
              <span></span>
              <span><a class="remove" href="#">删除</a></span>
            </div>
          </div>
        </div>
      </div>
      <div id="new"></div>
    </div>
    <!-- 
      页面加载时，随机生成用户头像，
      单击“发表评论“按钮时，将用户输入的信息作为新的节点创建，
      新节点的内容包括：用户头像、用户昵称、评论内容、系统当前时间，图标和删除链接，并将新创建的节点追加到页面显示；
      单击删除链接时，可以将对应信息节点删除。
     -->
     <script>
      document.getElementById("btn").onclick=function(){
        var img = document.getElementById("avatar").getAttribute("src");
        var name = document.getElementById("name").value;
        var txt = document.querySelector("#txt").value;
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        var h = date.getHours();
        var mm = date.getMinutes();
        var curTime = `${y}-${m}-${d} ${h}:${mm}`;
        console.log(curTime);
        var reply_item = document.createElement("div");
        reply_item.setAttribute("class","reply-item");
        var user =document.createElement("div");
        user.setAttribute("class","user");
        var user_face =document.createElement("div");
        user_face.setAttribute("class","user-face");
        var face_img = document.createElement("img");
        face_img.setAttribute("src",img);
        user_face.appendChild(face_img);
        user.appendChild(user_face);
        var user_name = document.createElement("div");
        user_name.setAttribute("class","user-name");
        user_name.innerText=name;
        user.appendChild(user_name);
        var p = document.createElement("p");
        p.innerText=txt;
        user.appendChild(p);
        var info = document.createElement("div");
        info.setAttribute("class","info");
        var infoHTML = `<span>${curTime}</span>
              <span>100</span>
              <span></span>
              <span><a class="remove" href="#">删除</a></span>`;
        info.innerHTML = infoHTML;
        reply_item.appendChild(user);
        reply_item.appendChild(info);
        var right = document.querySelector(".right");
        right.appendChild(reply_item);
        document.getElementById("name").value="";
        document.getElementById("txt").value="";
        var remove=document.querySelectorAll('.remove');
        remove.forEach(item => {
          item.addEventListener('click',removed);
        })
        function removed(){
          this.parentNode.parentNode.parentNode.parentNode;
          removeChild(this.parentNode.parentNode.parentNode);
        }
        function initRemove(){
          var remove=document.querySelectorAll('.remove')
          remove.forEach(item => {
            item.addEventListener('click',removed);
          })
        }
        initRemove();
        function initImg(){
          var num = Math.floor(Math.random()*16);
          document.getElementById('avatar').src=`./images/${num}.jpg`;
        }
        window.onload=initImg;   
      }
     </script>
  </body>
</html>
